<template>
  <v-toolbar color="blue-grey-darken-3">
    <template v-slot:prepend>
      <div class="text-h7">教务管理系统</div>
    </template>

    <v-divider class="ms-3" inset vertical></v-divider>

    <v-spacer></v-spacer>

    <v-spacer></v-spacer>
  </v-toolbar>
  <v-card flat title="签到发布">
    <template v-slot:text>
      <div class="d-flex flex-row">
        <v-combobox
          label="选择课程"
          :items="courses"
          v-model="selectedCourse"
          @update:model-value="select_course()"
        ></v-combobox>
      </div>
    </template>
    <v-btn
      icon="mdi-plus"
      style="margin-left: 20px"
      @click="release_signin"
    ></v-btn>
    <v-data-table :headers="headers" :items="items">
      <template v-slot:item="{ item }">
        <tr>
          <td>{{ item.release_date }}</td>
          <td>{{ item.cnt }}</td>
          <td>
            <v-icon @click="showSignin(item)">mdi-dots-horizontal</v-icon>
          </td>
        </tr>
      </template>
    </v-data-table>
  </v-card>
  <v-dialog v-model="detailing" width="auto">
    <v-card width="400">
      <v-card title="已签到" :text="signed"> </v-card>
      <v-card title="未签到" :text="unsigned"> </v-card>
      <v-card-actions>
        <v-btn color="primary" block @click="detailing = false">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import axios from "axios";
export default {
  async created() {
    let new_courses = [];
    let staff_id = this.$root.userinfo.id;
    await axios({
      method: "get",
      url: "http://127.0.0.1:8000/teacher/course_query",
      params: {
        staff_id: staff_id,
      },
    }).then((res) => {
      console.log(res);
      new_courses = res.data.data;
    });
    console.log(new_courses);
    let new_courses_name = [];
    for (let i = 0; i < new_courses.length; i++) {
      new_courses_name.push(new_courses[i][0]);
    }
    this.courses = new_courses_name;
    this.courses_data = new_courses;
  },
  data() {
    return {
      rules: {
        score: (value) => {
          if (value < 0 || value > 100) {
            return "0-100";
          }
          return true;
        },
      },
      //"student_id","sname","grade","sex","mobile_phone","dept_name"
      headers: [
        { key: "release_date", title: "发布日期" },
        { key: "cnt", title: "签到人数" },
        { key: "", title: "详情" },
      ],
      items: [],
      courses: [],
      selectedCourse: "",
      studentDialog: false,
      stu_searching: "",
      stu_searching_result: "",
      selectedCourse_data: [],
      detailing: false,
      signed: "",
      unsigned: "",
    };
  },
  methods: {
    async select_course() {
      //判断this.selected_course是否为空
      if (!this.selectedCourse) {
        return;
      }
      let staff_id = this.$root.userinfo.id;
      let new_items = [];
      console.log(this.selectedCourse);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/signin_query",
        params: {
          course_name: this.selectedCourse,
          staff_id: staff_id,
        },
      }).then((res) => {
        console.log(res);
        new_items = res.data.data;
      });
      this.items = new_items;
      console.log(this.items);
    },
    async showSignin(item) {
      console.log(item);
      console.log(this.signed);
      console.log(this.unsigned);
      let s = "",
        us = "";
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/signin_detail",
        params: {
          signin_id: item.signin_id,
        },
      }).then((res) => {
        console.log(res);
        s = res.data.signed;
        us = res.data.unsigned;
      });
      this.signed = s;
      this.unsigned = us;
      console.log(this.signed);
      console.log(this.unsigned);
      this.detailing = true;
    },
    async release_signin() {
      let staff_id = this.$root.userinfo.id;
      console.log(this.selectedCourse);
      await axios({
        method: "get",
        url: "http://127.0.0.1:8000/teacher/signin_release",
        params: {
          staff_id: staff_id,
          course_name: this.selectedCourse,
        },
      }).then((res) => {
        console.log(res);
      });
      this.select_course();
    },
  },
};
</script>
